<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    账号<input class="account" type="text"> 
    密码<input class="pwd" type="text">
    生日<input class="birthday" type="text">
    性别<input class="sex" type="text">
    身高<input class="height" type="text">
    体重<input class="weight" type="text">
    鞋码<input class="shoe-size" type="text">
    饭量<input class="rice" type="text">
    
    记住密码<input class="record" type="checkbox">

    <ul>
        <li>
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </li>
        <li></li>
        <li></li>
    </ul>

    <script>
        const account = document.querySelector('.account');
        const pwd = document.querySelector('.pwd');
        const record = document.querySelector('.record');

        init();

        record.addEventListener('change', function (e) {
            e.target.checked ? save() : clear();
        });

        // 存储
        function save () {
            localStorage.setItem('account', account.value);
            localStorage.setItem('pwd', pwd.value);
            alert('记住了');
        }

        // 清空
        function clear () {
            localStorage.removeItem('account');
            localStorage.removeItem('pwd');
            alert('已清空');
        }

        // 初始化
        function init () {
            const accountValue = localStorage.getItem('account');
            const pwdValue = localStorage.getItem('pwd');
            account.value = accountValue || '';
            pwd.value = pwdValue || '';
        }

    </script>
</body>
</html>
